<template>
  <div id="root" class="df fdc">
    <div class="header df ai bs">
        <img class="logo" src="../assets/images/logo.png" />
        <button @click="logout" class="logout cp df ai"><img src="../assets/images/logout.png" class="out"><img class="in" src="../assets/images/logout-outline.png" alt=""> 退出</button>
    </div>
    <div class="main df">
      <div class="m-left" :class="mLeftColClass">
        <!-- <img class="m-center" :class="colClass" @click="colOpenOff" src="../assets/images/sy2.png"></img> -->
        <img class="m-center cp" :class="colClass" @click="colOpenOff" src="../assets/images/sy2.png" alt="">
        <div class="logo-data df jc ai fdc">
            <img src="../assets/images/sy1.png" style="width: 45px;">
            <div>2020年4月27日  星期一</div>
        </div>
        <ul>
          <li  class="m-l-sub1">
            <div class="m-l-sub1-div cp us df ai" :class="sideMenu[0]?'active':''" @click="sideActive('0',!sideSub2[0])">
                <img src="../assets/images/sy3.png" style="width:18px;margin: 0 10px 0 15px;" />
                <span>综合办公</span>
            </div>
            <ul v-show="sideSub2[0]">
              <li class="m-l-sub2 df">
                <div class="line-point df fdc ai jc">
                    <div class="line-t"></div>
                    <img src="../assets/images/sy11.png" />
                    <div class="line-b"></div>
                </div>
                <a href="">待办</a>
              </li>
              <li class="m-l-sub2 df">
                <div class="line-point df fdc ai jc">
                    <div class="line-b"></div>
                    <img src="../assets/images/sy11.png" />
                    <div class="line-b"></div>
                </div>
                <a href="">已办</a>
              </li>
              <li class="m-l-sub2 df">
                  <div class="line-point df fdc ai jc">
                      <div class="line-b"></div>
                      <img src="../assets/images/sy11.png" />
                      <div class="line-b"></div>
                  </div>
                  <a href="">待阅</a>
              </li>
              <li class="m-l-sub2 df">
                  <div class="line-point df fdc ai jc">
                      <div class="line-b"></div>
                      <img src="../assets/images/sy11.png" />
                      <div class="line-t"></div>
                  </div>
                  <a href="">已阅</a>
                </li>
            </ul>
          </li>
          <li class="m-l-sub1">
            <div class="m-l-sub1-div df ai  cp us" :class="sideMenu[1]?'active':''" @click="sideActive('1', !sideSub2[1])">
                <img src="../assets/images/sy5.png" style="width:18px;margin: 0 10px 0 15px;" />
                <span>文档管理</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="m-right df fdc" :class="mRightCol">
        <ul class="m-r-top df ai">
          <li v-if="roleType"><router-link tag="a" to="/todoList"><img class="m-r-t-img" src="../assets/images/sy6.png" alt=""></router-link></li>
          <li><router-link tag="a" to="/newsList/zxxw"><img class="m-r-t-img" src="../assets/images/sy7.png" alt=""></router-link></li>
          <li><router-link tag="a" to="/appStore"><img class="m-r-t-img" src="../assets/images/sy9.png" alt=""></router-link></li>
          <li><router-link tag="a" to="/contactBooks"><img class="m-r-t-img" src="../assets/images/sy8.png" alt=""></router-link></li>
        </ul>
        <ul class="m-r-bottom df">
          <li v-for="item in datalist" :key="'t-'+item.id">
            <div class="m-r-b-title df">
              <div class="title cp">{{item.title}}</div>
              <a href=""><img src="../assets/images/more.png"></a>
            </div>
            <div class="m-r-b-content">
              <a v-for="(data,index) in item.lists" :key="'con-t-'+data.id" href="javascript:;" class="list df"><p class="item"><i>{{index+1}}.&nbsp;&nbsp;</i> {{data.title}}</p> <span>{{data.time}}</span>  </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer">Copyright 国银金融租凭股份有限公司 粤ICP备10008459号</div>
  </div>
</template>

<script src="./home.js"></script>

<style scoped>
@import './home.scss';
</style>
